<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1 {
	width: 200px;
	height: 200px;
	background-color: red;
	position: absolute;
}

#div2 {
	width: 20px;
	height: 1000px;
	border: 2px solid black;
	margin: 0 auto;
	left: 800px;
	position: absolute;
	border: 2px solid black;
}
</style>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<script type="text/javascript">
		var div1 = document.getElementById('div1');
	    /* var windowWidth = window.screen.width;  */
	
			/* div1.style.left='3px'; */
			 var index1=0;
			var timer=setInterval(()=>{
				
				div1.style.left=index1 +'px';
				index1 += 3;
				if(parseInt(div1.style.left)>=800){
					   
					 div1.style.left='800px';
					 clearInterval(timer);
					 var timer2=setInterval(()=>{
							var index2=3;
							div1.style.top=index2 +'px';
							index2 += 3;
							if(parseInt(div1.style.top)>=500){
								   
								 div1.style.top='500px';
								clearInterval(timer2);
							}	
						},10);	  
				}
				
			},10); 
			
		 
		 

	 
		
		
	</script>
</body>
</html>